<template>
	<div class="login-container">
		<div class="company-header">
			<!-- 图标占位符，可替换为实际logo -->
			<div class="company-logo-placeholder">
				<span class="logo-icon">GB</span>
			</div>
			<h1 class="company-name">浙江冈本电子有限公司</h1>
		</div>
		<tm-message ref="toast"></tm-message>
		<!-- 登录表单区域 -->
		<div class="login-card">
			<h2 class="login-title">账户登录</h2>

			<form class="login-form" @submit.prevent="handleLogin">
				<!-- 用户名输入 -->
				<div class="form-group">
					<label for="username" class="form-label">用户名</label>
					<div class="input-wrapper">
						<span class="input-icon">👤</span>
						<tm-input type="text" id="username" v-model="username" placeholder="请输入用户名" required
							:border-bottom="false" class="custom-tm-input" />
					</div>
				</div>

				<!-- 密码输入 -->
				<div class="form-group">
					<label for="password" class="form-label">密码</label>
					<div class="input-wrapper">
						<span class="input-icon">🔒</span>
						<tm-input input-type="password" id="password" v-model="password" placeholder="请输入密码" required
							:border-bottom="false" class="custom-tm-input" />
					</div>
				</div>

				<!-- 登录按钮 -->
				<button @click="handleLogin" class="login-btn" :disabled="isLoading">
					<span v-if="!isLoading">登录</span>
					<span v-if="isLoading" class="loading-spinner">⟳</span>
				</button>
			</form>
		</div>

		<!-- 底部版权信息 -->
		<footer class="login-footer">
			<p>© 2025 浙江冈本电子有限公司 版权所有</p>
		</footer>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				username: '',
				password: '',
				isLoading: false,
				menubarsValue: false,
				message: ''
			};
		},
		methods: {
			async handleInfo(){
				try {
					const res= await uni.$tm.request.post('sys/user/info');
					if(res.code==0) {
						uni.setStorageSync('info', res.data);
					}
				}catch(err){
					console.log(err)
				}
			},
			async handleLogin() {
				if (!this.username || !this.password) {
					alert('请输入用户名和密码');
					return;
				}

				this.isLoading = true; // 开始加载，按钮禁用

				try {
					const res = await uni.$tm.request.post('login', {
						"username": this.username,
						"password": this.password
					});

					if (res.code == 0) {
						// 登录成功处理
						this.$nextTick(() => {
							this.$refs.toast.show({
								model: 'success',
								label: '登录成功'
							});
						});
						uni.setStorageSync('token', res.data.token);
						this.handleInfo()
						this.menubarsValue = true;

						// 延迟跳转首页
						setTimeout(() => {
							uni.reLaunch({
								url: "/pages/Home"
							});
							this.menubarsValue = false;
						}, 1500);
					} else {
						// 登录失败（后端返回错误）
						this.$nextTick(() => {
							this.$refs.toast.show({
								model: 'error',
								label: res.msg || '登录失败，请检查账号密码'
							});
						});
						this.isLoading = false; // 重置加载状态，按钮恢复
						this.menubarsValue = false;
					}
				} catch (error) {
					// 网络异常等前端错误
					this.$nextTick(() => {
						this.$refs.toast.show({
							model: 'error',
							label: '网络异常，请稍后重试'
						});
					});
					this.isLoading = false; // 重置加载状态，按钮恢复
					this.menubarsValue = false;
				}
			}
		}
	};
</script>

<style scoped>
	/* 基础容器样式 */
	.login-container {
		min-height: 100vh;
		background: #ffffff;
		padding: 25px 20px;
		box-sizing: border-box;
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	/* 企业标识区域 */
	.company-header {
		text-align: center;
		margin-bottom: 40px;
	}

	.company-logo-placeholder {
		width: 80px;
		height: 80px;
		background: #3b82f6;
		border-radius: 16px;
		margin: 20px auto 26px;
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
	}

	.logo-icon {
		color: white;
		font-size: 32px;
		font-weight: bold;
	}

	.company-name {
		font-size: 18px;
		font-weight: 600;
		color: #1e293b;
		margin: 0;
		line-height: 1.4;
	}

	/* 登录卡片 */
	.login-card {
		width: 100%;
		max-width: 360px;
		background: white;
		border-radius: 20px;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
		padding: 30px 24px;
		box-sizing: border-box;
		margin-bottom: auto;
	}

	.login-title {
		font-size: 22px;
		font-weight: 600;
		color: #1e293b;
		margin: 0 0 24px;
		text-align: center;
	}

	/* 表单样式 */
	.login-form {
		display: flex;
		flex-direction: column;
		gap: 20px;
	}

	.form-group {
		display: flex;
		flex-direction: column;
		gap: 8px;
	}

	.form-label {
		font-size: 16px;
		margin-top: 4px;
		color: #475569;
		font-weight: 500;
	}

	.input-wrapper {
		position: relative;
		display: flex;
		align-items: center;
	}

	/* 自定义 tm-input 样式 */
	.custom-tm-input {
		width: 100%;
		padding: 6px 16px 6px 48px;
		border: 1px solid #e2e8f0;
		border-radius: 8px;
		font-size: 16px;
		color: #1e293b;
		box-sizing: border-box;
		transition: all 0.3s ease;
		outline: none;
	}

	.custom-tm-input:focus {
		border-color: #3b82f6;
		box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
	}

	.custom-tm-input::placeholder {
		color: #94a3b8;
	}

	.input-icon {
		position: absolute;
		left: 16px;
		font-size: 18px;
		color: #64748b;
	}

	/* 登录按钮 */
	.login-btn {
		width: 100%;
		padding: 14px;
		background: #3b82f6;
		color: white;
		border: none;
		border-radius: 8px;
		font-size: 16px;
		font-weight: 600;
		cursor: pointer;
		transition: all 0.3s ease;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 22px;
	}

	.login-btn:hover {
		background: #2563eb;
		box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
	}

	.login-btn:disabled {
		background: #e2e8f0;
		color: #94a3b8;
		cursor: not-allowed;
		box-shadow: none;
	}

	/* 加载动画 */
	.loading-spinner {
		animation: spin 1s linear infinite;
	}

	@keyframes spin {
		from {
			transform: rotate(0deg);
		}

		to {
			transform: rotate(360deg);
		}
	}

	/* 底部版权信息 */
	.login-footer {
		margin-top: 40px;
		text-align: center;
	}

	.login-footer p {
		font-size: 12px;
		color: #94a3b8;
		margin: 0;
	}

	/* 响应式调整 */
	@media (max-width: 375px) {
		.login-container {
			padding: 15px 16px;
		}

		.company-logo-placeholder {
			width: 70px;
			height: 70px;
		}

		.company-name {
			font-size: 16px;
		}

		.login-card {
			padding: 24px 16px;
		}

		.custom-tm-input {
			padding: 6px 14px 6px 44px;
			font-size: 15px;
		}
	}
</style>